<!--岗位信息子页面-->
<template>
    <div class="container">
        <div class="box">
            <el-select id="select" style="width: 50%" v-model="value" placeholder="请选择需要查看的部门名称">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <div>
                <el-button type="primary" round @click="research">查 找</el-button>
                <el-button type="danger" round @click="addStation">添加岗位</el-button>
            </div>

        </div>
        <div>
            <el-table
                    :data="tableData_Stations"
                    style="width: 100%">
                <el-table-column
                        prop="stationName"
                        label="岗位名称">
                </el-table-column>
                <el-table-column
                        prop="clockIn"
                        label="上班时间">
                </el-table-column>
                <el-table-column
                        prop="clockOut"
                        label="下班时间">
                </el-table-column>
                <el-table-column
                        prop="averageSalary"
                        label="平均工资">
                </el-table-column>
                <el-table-column
                        prop="jobNumber"
                        label="员工数量">
                </el-table-column>
                <el-table-column
                        prop="department"
                        label="所属部门">
                </el-table-column>
                <el-table-column align="right">
                    <template slot-scope="scope">
                        <el-button @click="deleteStation(scope.row.station_id)" type="text" size="small" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <!--        添加岗位弹框-->
        <el-dialog title="添加岗位" :visible.sync="addDialogVisible" width="40%">
            <el-form ref="add_form_ref" :model="add_form" >
                <el-form-item label="岗位名称">
                    <el-col :span="20">
                        <el-input placeholder="请输入岗位名称" v-model="add_form.station_name"></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="上班时间">
                    <el-select id="select" style="width: 50%" v-model="add_form.clock_in_value" placeholder="选择上班时间">
                        <el-option
                                v-for="item in clock_in_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下班时间">
                    <el-select id="select" style="width: 50%" v-model="add_form.clock_out_value" placeholder="选择下班时间">
                        <el-option
                                v-for="item in clock_out_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属部门">
                    <el-select id="select" style="width: 50%" v-model="add_form.belong_department" placeholder="岗位所属部门">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add_new_Station">添 加</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData_Stations: [],
                options: [],
                value: '',
                addDialogVisible: false,
                clock_in_options: [
                    {
                        value: '510',
                        label: '8:30'
                    },
                    {
                        value: '540',
                        label: '9:00'
                    },
                    {
                        value: '570',
                        label: '9:30'
                    },
                    {
                        value: '600',
                        label: '10:00'
                    },
                ],
                clock_out_options: [
                    {
                        value: '1050',
                        label: '17:30'
                    },
                    {
                        value: '1080',
                        label: '18:00'
                    },
                    {
                        value: '1110',
                        label: '18:30'
                    },
                    {
                        value: '1140',
                        label: '19:00'
                    },
                ],
                add_form: {
                    station_name: '',
                    clock_in_value: '',
                    clock_out_value: '',
                    belong_department: ''
                },
            }
        },
        methods: {
            addStation() {
                this.addDialogVisible = true
            },
            //添加操作
            add_new_Station() {
                //获取到所属的部门名称
                let obj = {}
                obj = this.options.find((item) => {
                    return item.value === this.add_form.belong_department
                })
                //首先判断数据是否为空 为空则不发送
                if (this.add_form.station_name === '' || this.add_form.clock_in_value === '' || this.add_form.clock_out_value === ''
                    || this.add_form.belong_department === '' || obj.label === '未选择') {
                    this.$message.error('请选项不要留空并且选择一个归属部门')
                }
                //不为空发送
                else {

                    // console.log(obj.label)
                    //构造json数据
                    let data = {
                        "token": this.$store.state.token,
                        'stationName': this.add_form.station_name,
                        'clockIn': this.add_form.clock_in_value,
                        'clockOut': this.add_form.clock_out_value,
                        'department': obj.label,
                        'department_id': obj.value
                    }
                    console.log(data)
                    //发送给后台
                    this.$http.post('addStation', data).then( res => {
                        if (res.data.code === 200) {
                            this.addDialogVisible = false
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            })
                            this.fetch()

                        }
                        else if (res.data.code === 403 && res.data.type === 'station_exist') {
                            this.$message.error('该岗位已存在，请不要重复添加')
                            this.reset()
                        }
                        else if (res.data.code === 403 && res.data.type === 'non_access') {
                            this.$message.error('没有添加权限')
                        }
                        else {
                            this.$message.error('未知错误')
                        }

                    })
                }

            },

            deleteStation(id) {
                // console.log(id)
                let data = {"token": this.$store.state.token, 'station_id': id}
                this.$http.post('/deleteStation', data).then( res => {
                    if(res.data.code === 200){
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.fetch()
                    }
                    else if(res.data.code === 403){
                        this.$message.error('没有删除权限')
                    }
                    else {
                        this.$message.error('删除发生了错误')
                    }

                })
            },
            reset() {
                this.add_form.station_name = ''
                this.add_form.clock_in_value = ''
                this.add_form.clock_out_value = ''
                this.add_form.belong_department = ''
            },
            //条件查找
            research() {
                // console.log(this.value)
                let obj = {}
                obj = this.options.find((item) => {
                    return item.value === this.value
                })
                console.log(obj.label)
                let data = {"token": this.$store.state.token, "stationName": obj.label}
                this.$http.post('/getStationInfo',data).then( res => {
                    this.tableData_Stations = res.data.data
                })
            },

            fetch() {
                let data = {"token": this.$store.state.token, "stationName": null}
                this.$http.post('/getStationInfo', data).then( res => {
                    // console.log(res.data)
                    this.tableData_Stations = res.data.data
                    this.options = res.data.option
                })
            }
        },
        created() {
            this.fetch()
        }
    }
</script>

<style scoped>
    .container .box {
        float: top;
    }
    .box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
</style>
